$(function () {

    // 进入界面自动加载所有文章
    function getList() {
        $.ajax({
            type: 'get',
            url: '/admin/category/list',
            // 这段代码除了登陆页面不要加，其他的页面都要加
            // headers: {
            //     // 获取到本地存储的token，做凭证验证（判断是哪个账号）
            //     Authorization: localStorage.getItem('token')
            // },
            success: function (backData) {
                console.log(backData);
                let res = template('cate_item', backData)
                $('tbody').html(res)
            }
        })
    }
    getList()

    // 点击新增按钮
    $('#xinzengfenlei').on('click', function () {
        $('#myModal').modal()
        // 点击保存按钮
        $('.btn_opt').on('click', function (e) {
            e.preventDefault()
            let name = $('[name="name"]').val().trim()
            let slug = $('[name="slug"]').val().trim()

            $.ajax({
                type: 'post',
                url: '/admin/category/add',
                // headers: {
                //     // 获取到本地存储的token，做凭证验证（判断是哪个账号）
                //     Authorization: localStorage.getItem('token')
                // },
                data: {
                    name,
                    slug
                },
                success: function (backData) {
                    if (backData.code == 200) {
                        $('#myModal').modal('hide')
                        $('[name="name"]').val('')
                        $('[name="slug"]').val('')
                        getList()
                    } else {
                        layer.msg(backData.msg)
                    }
                }
            })
        })
    })


    // 点击编辑按钮
    $('tbody').on('click', '.btn_edit', function () {
        $('#editModal').modal()
        // 找到当前点击的这个编辑按钮，找到他最近的祖先元素tr，再找到这个突然里面的第一个td，获取到他的文本
        let name = $(this).parents('tr').find('td').eq(0).text()
        let slug = $(this).parents('tr').find('td').eq(1).text()

        $('#name').val(name)
        $('#slug').val(slug)
        // 把id放在保存按钮上
        $('.btn_opt_edit').attr('data-id', $(this).attr('data-id'))
    })

    // 给编辑按钮的保存按钮做点击事件
    $('.btn_opt_edit').on('click', function (e) {
        e.preventDefault()
        let name = $('#name').val().trim()
        let slug = $('#slug').val().trim()
        let id = $(this).attr('data-id')

        $.ajax({
            type: 'post',
            url: '/admin/category/edit',
            data: {
                id,
                name,
                slug
            },
            // headers: {
            //     // 获取到本地存储的token，做凭证验证（判断是哪个账号）
            //     Authorization: localStorage.getItem('token')
            // },
            success: function (backData) {
                // 统一提示后端返回的提示信息
                layer.msg(backData.msg)
                if (backData.code === 200) {
                    $('#editModal').modal('hide')
                    getList()
                }
            }
        })
    })


    // 点击删除按钮
    $('tbody').on('click', '.btn-danger', function () {
        // console.log('111');
        let id = $(this).attr('data-id')
        // console.log(id);
        layer.confirm('确定删除？', function (index) {
            $.ajax({
                type: 'post',
                url: '/admin/category/delete',
                // headers: {
                //     // 获取到本地存储的token，做凭证验证（判断是哪个账号）
                //     Authorization: localStorage.getItem('token')
                // },
                data: {
                    id
                },
                success: (backData) => {
                    $(this).parent().parent().remove()
                }

            })
            layer.close(index)
        })


    })


    // 点击编辑按钮
    // $('tbody').on('click', '.btn-info', function () {
    //     // console.log('11');
    //     let id = $(this).attr('data-id')
    //     // console.log(id);
    //     /* window.location.href = './article_edit.html?id='+ id */
    //     $('#myModal').modal()
    //     // 表格显示出来根据ID显示分类名和分类别名
    //     $.ajax({
    //         type: 'get',
    //         url: 'http://localhost:8080/api/v1/admin/category/search',
    //         headers: {
    //             // 获取到本地存储的token，做凭证验证（判断是哪个账号）
    //             Authorization: localStorage.getItem('token')
    //         },
    //         data: {
    //             id
    //         },
    //         success: function (backData) {
    //             console.log(backData);
    //             $('[name="name"]').val(backData.data[0].name)
    //             $('[name="slug"]').val(backData.data[0].slug)
    //         }
    //     })


    //     // 给编辑页面保存按钮做点击事件
    //     $('.btn_opt').on('click',function(e){
    //         e.preventDefault()
    //         let loadId = 0
    //         let name = $('[name="name"]').val().trim()
    //         let slug = $('[name="slug"]').val().trim()

    //         $.ajax({
    //             type:'post',
    //             url:'http://localhost:8080/api/v1/admin/category/edit',
    //             headers: {
    //                 // 获取到本地存储的token，做凭证验证（判断是哪个账号）
    //                 Authorization: localStorage.getItem('token')
    //             },
    //             data:{
    //                 id,
    //                 name,
    //                 slug
    //             },
    //             // beforeSend: function () {
    //             //     // layer.load()会返回一个ID值，关闭效果需要ID值
    //             //     loadId = layer.load()
    //             //     /* layer.alert('沙雕',{icon:1})
    //             //     layer.msg('大沙雕',{icon:5})
    //             //     layer.load(1) */
    //             //   },
    //             //   // 请求发送后
    //             //   complete:function(){
    //             //     // 关闭加载效果，括号里面是效果的ID
    //             //     layer.close(loadId)
    //             //   },
    //             success:function(backData){
    //                 // console.log(backData);
    //                 if (backData.code == 200) {
    //                     $('#myModal').modal('hide')
    //                     $('[name="name"]').val('')
    //                     $('[name="slug"]').val('')
    //                     getList()
    //                 } else {
    //                     layer.msg(backData.msg)
    //                 }
    //             }
    //         })
    //     })
    // })

})